<template>
  <span class="xdh-capture" @click.prevent="capture">
    <slot name="button">
      <el-button circle icon="el-icon-view"></el-button>
    </slot>
  </span>
</template>

<script>
  /**
   * capture 截取屏幕元素组件
   * @module widgets/xdh-capture
   * @example
   *
   * // 使用说明
   * <xdh-capture :options="opt" :dom="capDom" @on-capture="showDom" @on-output="showTime"></xdh-capture>
   *
   * // ----------或使用slot-------
   *
   * <xdh-capture :options="opt" :dom="capDom" @on-capture="showDom" @on-output="showTime">
   *    <el-button slot="button">屏幕截取</el-button>
   * </xdh-capture>
   */
  // import html2canvas from 'html2canvas'
  import {downloadByData} from '@/utils/download'
  import date from '@/utils/date'

  const h2cImport = function () {
    return import('html2canvas')
  }
  /**
   * 插槽
   * @member slot
   * @property {string} [button] 放置button 按钮的 slot
   */
  export default {
    name: 'XdhCapture',
    /**
     * 参数属性
     * @property {HTMLElement} [dom = d.body] 需要截取的Dom节点， 默认为document.body
     * @property {Object} [options] html2canvas的配置项
     * @property {Boolean} [options.async = true] 解析 html节点 并 渲染在canvas 这个过程 同步进行
     * @property {Boolean} [options.allowTaint = true] 允许跨域的图片显示在canvas中（原h2c组件默认是false，封装时定义为ture）
     * @property {Boolean} [options.useCORS = true] 是否允许开启跨域，原h2c默认为false， 封装时定义为true
     * @property {String} [options.backgroundColor = #fffff] canvas的背景颜色默认为白
     * @property {Number} [options.imageTimeout] 图片加载的等待时间， 默认是 15s
     * @property {Function} [options.ignoreElement] (element) => false
     * @property {Boolean} [options.logging = false] 是否在console中打印转化过程，h2c中默认打印，封装转为默认不打印
     * @property {Boolean} [options.removeContainer = true] 是否清除h2c组件调用时生成的临时dom节点，默认true
     * @property {Number} [options.scale = window.DPR] 图片的比例 默认为浏览器的dpr比
     * @property {Number} [width = element.width] 截取dom的width
     * @property {Number} [height = element.height] 截取dom的height
     * @property {Number} [x = ele.x-offset] canvas 的 原点 处于 dom原点的 水平距离（x距离），并在此位置开始渲染（原点为左上角）
     * @property {Number} [y = ele.y-offset] canvas 的 原点 处于 dom原点的 垂直距离（y距离），并在此位置开始渲染（原点为左上角）
     * @property {Number} [windowWidth = w.innerWidth] 在渲染dom时的实时window.innerWidth, 可以手动修改 (修改此参数会让dom内一些根据windows大小而改变布局/大小的节点以此值来改变原来的位置和大小（例如某些并列的元素会被换行）)
     * @property {Number} [windowHeight = w.innerHeight] 在渲染dom时的实时window.innerHeight, 可以手动修改
     * @property {Number} [scrollX = element.scrollX]
     */
    props: {
      dom: {
        type: HTMLElement,
        default() {
          return document.body
        }
      },
      options: {
        type: Object
      }
    },
    data() {
      return {
        h2c: null
      }
    },
    computed: {
      h2cOpt() {
        let obj = {
          logging: false,
          allowTain: true,
          useCORS: true
        }
        return Object.assign(obj, this.options || {})
      }
    },
    methods: {
      capture() {
        /**
         * 点击抓取时派发的事件
         * @event on-capture
         * @param {HTMLElement} [dom] 抓取的dom节点
         */
        this.$emit('on-capture', this.dom)
        if (this.h2c) {
          this._renderImg(this.h2c)
        } else {
          h2cImport().then((res) => {
            if (res) {
              this.h2c = res.default || res
              this._renderImg(this.h2c)
            }
          })
        }
      },
      /**
       * 内部渲染函数
       * @Function _renderImg
       * @param h2c {Function} html2canvas的功能函数
       */
      _renderImg(h2c) {
        let opt = this.h2cOpt;
        h2c(this.dom, opt).then((canvas) => {
          let imgData = canvas.toDataURL()
          let nowTime = date(new Date(), 'yyyyMMddhhmmss')
          downloadByData(null, `${nowTime}.png`, imgData)
          /**
           * 图片下载时派发的事件
           * @event on-output
           * @param {string} imgData 生成图片的Base64字符串
           */
          this.$emit('on-output', imgData)
        })
      }
    }

  }
</script>
